<template>
  <div>
    <my-header :title="$t('lang.popularize')" :showBack="true" />
    <div  class="recruit_box">
      <section class="recruit_logo_img">
        <img class="" src="../../assets/img/my/logo.png" style="width:100%">
      </section>
      
      <div class="code">
        <!-- <div class="qart">
          <canvas id="canvas"></canvas>
        </div> -->
        <h4 class="schred">{{$t('lang.joinUs')}}</h4>
        <div class="circle_friend_recruitment_qr">
          <img id="circleFriendRecruitmentQr" style="width:100%;pointer-events: auto;">
        </div>
        <p>{{$t('lang.sasffawf')}}</p>
        <div class="circle_friend_recruitment_btn">
          <van-button type="primary" class="copy_btn" :data-clipboard-text="url" @click="promote">{{$t('lang.copyLink')}}</van-button>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import qrcode from "qrcode";
import header from "@/components/header";
import ClipboardJS from 'Clipboard'
import { Toast } from "vant";
export default {
  components: {
    "my-header": header
  }, 
  data() {
    return {
      customerNumber:"",
      active: 0,
      url:'',

    };
  },
  mounted() {
    this.getuserinfo();
    this.createQr();
  },
  methods: {
    //获取用户推荐码  
    getuserinfo(){
      this.$ajax(this.$api.getMyInfo).then(res => {
       // console.log(res,"11")
        this.loading = false;
        if (res.code == 0) {
          console.log(res.msg);
          this.customerNumber=res.msg.customerName;
        }
      })
    },
    //生成二维码
    createQr() {
      var opts = {
        errorCorrectionLevel: "H",
        type: "image/png",
        rendererOpts: {
          quality: 0.3
        }
        // color: {dark: '#fff', light: '#3f52b4'}
      };
      // this.url = this.$api.qrUrl  + JSON.parse(localStorage.getItem("userInfo")).customerName
      this.url = this.$api.qrUrl + "register/" + JSON.stringify({parentPhone: this.customerNumber,recommendPhone:this.customerNumber })

      console.log( this.url)
      qrcode.toDataURL(
        this.url,
        opts,
        function(err, url) {
          if (err) throw err;
          var img = document.getElementById("circleFriendRecruitmentQr");
          img.src = url;
        }
      );
    },
    promote() {
      if (this.url != "") {
        const clipboard = new ClipboardJS('.copy_btn');
        clipboard.on('success', (e)=> {
            e.clearSelection();
            Toast({
              message: this.$t('lang.copyLinkSuccess'),
              position: "bottom"
            });
        });
        clipboard.on('error', function(e) {
          Toast({
              message: this.$t('lang.copyLinkError'),
              position: "bottom"
            });
        });
      }
    }
  }
};
</script>

<style>
  .recruit_box{
    background:url(../../assets/img/my/bg2.png);
    background-size:100% 100%;
    background-attachment: scroll;
  }
  .recruit_logo_img{
    width: 15vh;
    padding: 15px 20px 0;
    margin: 0 auto;
    /* position: absolute; */
  }
  .recruit_box .qart{
    text-align: center;
    margin-top:42vh;
  }
  .recruit_box .code{
    margin-bottom:22vh;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 10px;
  }
  .circle_friend_recruitment_qr {
    margin: 0px auto 0px auto;
    width: 55vw;
  }
  .circle_friend_recruitment_qr img{
    width: 45vw!important;
  }
  .recruit_box .code p{
    color:#000;
    text-align: center;
  }
  .recruit_box .code button{
    border-radius: 6px;
    background:#C30001;
  }
  .circle_friend_recruitment_btn{
    margin-top: 2vh;
  }
  .schred{text-align: center;color: #C30001;font-size: 18px;}
</style>
